<template>
  <div>
    <div>
      <div class="grid-content content bg-purple blog_bg">
        <div
          style="
            height: 3px;
            margin: 5px 0;
            border: none;
            border-top: 3px solid #1eb9e0;
          "
        ></div>

        <el-form
          :model="comment"
          :rules="rules"
          ref="comment"
          class="demo-ruleForm"
        >
          <el-form-item prop="content">
            <div style="width: 95%; margin: auto; padding-top: 1%">
              <el-input
                type="textarea"
                :rows="7"
                ref="ipt"
                :placeholder="placeholder"
                v-model="comment.content"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="nickname">
            <el-col :span="6" style="margin-left: 2%" v-if="blogId === -1">
              <el-input
                placeholder="请输入昵称"
                prefix-icon="el-icon-user-solid"
                v-model="comment.nickname"
                v-if="blogId === -1"
              ></el-input>
            </el-col>
            <el-col :span="10" style="margin-left: 2%" v-if="blogId === -1">
              <el-input
                placeholder="请输入邮箱,也可不填（有问题我会通过邮箱回复）"
                prefix-icon="el-icon-s-promotion"
                v-model="comment.email"
                v-if="blogId === -1"
              ></el-input>
            </el-col>
            <el-col :span="2" style="margin-left: 2%">
              <el-button type="primary" plain @click="resetForm('comment')"
                >清空</el-button
              >
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="submitForm('comment')"
                >发表</el-button
              >
            </el-col>
          </el-form-item>
        </el-form>

        <!-- 分割线 -->
        <!-- <div style="background-color: #DCDFE6;height: 1px;margin: 5px 0;"></div> -->
        <div
          style="
            height: 3px;
            margin: 5px 0;
            border: none;
            border-top: 3px solid #1eb9e0;
          "
        ></div>

        <div style="width: 95%; margin: auto; padding-top: 1%">
          评论 <el-tag v-if="user.username">{{ user.username }}</el-tag>
          <div
            style="background-color: #dcdfe6; height: 1px; margin: 13px 0"
          ></div>
        </div>

        <!-- 评论区 -->

        <div v-for="(item1, index1) in commentData" :key="index1">
          <!-- 父评论 -->
          <div style="width: 95%; margin: auto; padding-top: 1%">
            <el-row :gutter="15">
              <el-col :span="2">
                <div>
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="item1.avatar"
                  >
                  </el-image>
                </div>
              </el-col>
              <el-col :span="22">
                <div style="width: 100%">
                  <!-- <span style="font-size: 12px;font-weight:bold;margin: 0px;" >2222</span> -->
                  <p style="font-size: 12px; line-height: 0; font-weight: bold">
                    {{ item1.nickname }}
                    <span style="font-size: 10px; font-weight: normal">
                      {{ item1.createTime }}</span
                    >
                  </p>
                  <p style="font-size: 13px">{{ item1.content }}</p>
                  <p
                    style="font-size: 10px; line-height: 0"
                    @click="reply(item1)"
                  >
                    <el-link style="font-size: 5px" :underline="false"
                      >回复</el-link
                    >
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 子评论 -->
          <div
            v-for="(item2, index2) in item1.replyComments"
            :key="index2"
            style="width: 88%; margin: auto; padding-top: 1%; margin-left: 10%"
          >
            <el-row :gutter="15">
              <el-col :span="2">
                <div>
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="item2.avatar"
                  >
                  </el-image>
                </div>
              </el-col>
              <el-col :span="22">
                <div style="width: 100%">
                  <!-- <span style="font-size: 12px;font-weight:bold;margin: 0px;" >2222</span> -->
                  <p style="font-size: 12px; line-height: 0; font-weight: bold">
                    {{ item2.nickname }}
                    <span
                      v-if="item2.adminComment"
                      style="font-size: 10px; font-weight: normal"
                    ></span>
                    <span
                      style="
                        font-size: 10px;
                        font-weight: normal;
                        color: #007eff;
                      "
                    >
                      @{{ item2.parentNickname }}</span
                    >
                    <span style="font-size: 10px; font-weight: normal">
                      {{ item2.createTime }}</span
                    >
                  </p>
                  <p style="font-size: 13px">{{ item2.content }}</p>
                  <p
                    style="font-size: 13px; line-height: 0"
                    @click="reply(item2)"
                  >
                    <el-link style="font-size: 5px" :underline="false"
                      >回复</el-link
                    >
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  data() {
    return {
      textarea: "", //评论内容
      comment: {
        blogId: "",
        content: "",
        nickname: "",
        email: "",
        parentCommentId: -1,
      },
      placeholder: "请输入评论内容",
      commentData: [],
      rules: {
        content: {
          required: true,
          message: "请输入评论内容再提交",
          trigger: "blur",
        },
      },
      showLogout: false,
      user: {},
    };
  },
  props: ["blogId"],
  mounted() {
    this.comment.blogId = this.blogId;
    console.log(this.user);
    // console.log( this.comment.blogId )
    this.initComment();
  },
  methods: {
    //聚焦回复评论
    reply(item) {
      // console.log(item)
      this.placeholder = "@" + item.nickname + "  " + item.content;
      this.comment.parentCommentId = item.id;
      this.$refs.ipt.focus();
    },

    //初始化评论数据
    initComment() {
      const _this = this;
      this.axios.get("comment/comments/" + this.blogId).then((resp) => {
        console.log(resp);
        _this.commentData = resp.data;
      });
      if (localStorage.getItem("token")) {
        this.axios.get("/sys/userInfo").then((res) => {
          this.user = res.data.data;
        });
      }
    },
    //发表评论
    submitForm(formName) {
      location.reload();
      this.$refs[formName]
        .validate((valid) => {
          if (valid) {
            const _this = this;
            this.axios.post("/comment/comments", this.comment).then((resp) => {
              console.log(resp);
              if (resp.code == 200) {
                this.initComment();
                this.$message({ message: "已发表评论！", type: "success" });
                this.placeholder = "请输入评论内容";
              } else {
                this.$message.error("未知错误！");
              }
              this.comment.content = "";
              this.comment.nickname = "";
              this.comment.email = "";
            });
          } else {
            console.log("error submit!!");
            location.reload();
            return true;
          }
        })
        .catch((error) => {
          location.reload();
        });
    },
    //重置评论
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.placeholder = "请输入评论内容";
    },
    //管理员登录
    submitLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          this.axios
            .post(
              "/doLogin?username=" +
                this.loginForm.username +
                "&password=" +
                this.loginForm.password
            )
            .then((resp) => {
              console.log(resp);
              if (resp.data.status == 200) {
                window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
                _this.loginForm.username = "";
                _this.loginForm.password = "";
                _this.$message({
                  message: "登录成功！",
                  type: "success",
                });
                _this.dialogFormVisible = false;
                _this.user = true;
              } else {
                _this.$message.error({ message: "登录失败！" });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //注销登录
    subLogout() {
      this.$confirm("此操作将注销登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.get("/logout");

          window.sessionStorage.removeItem("user");
          this.user = false;
          this.$message({
            message: "注销成功！",
            type: "success",
          });
          this.dialogFormVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },
  },
};
</script>

<style scoped>
.blog_bg {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 95%;
  margin-top: 5% !important;
  margin-bottom: 5% !important;
  padding-bottom: 5% !important;
  margin: auto;
  min-height: 500px;
}
.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
</style>